import React from 'react';
import PropTypes from 'prop-types';
import {Card, Button, Row, Col, Table} from 'antd';
import {TABLE, DATE_FORMAT} from '../constants';
import {hasPermissions, renderBoolean} from './utils';
import {conventEnumValueToString, formatPercent, formatAmount, formatDateTime} from '../utils';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import {PERMISSION} from './constants';
import {agentKind, priceClause, currency} from '../Enum';
import routes from './routes';
import {getDetail} from './api';
import styles from './style.css';

const {Description} = DescriptionList;

export class DetailPanel extends React.PureComponent {
    state = {
        loading: false,
        data: {}
    };

    componentDidMount() {
        this.getDetailInfo();
    }

    getDetailInfo = () => {
        const id = this.props.id;
        this.setState({loading: true});
        getDetail(id)
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        data: res.data,
                    });
                else
                    this.setState(({
                        loading: false
                    }));
            });
    }

    handleUpdateClick = () => {
        this.props.history.push(routes.update.format(this.props.id));
    }
   
    render() {
        const detailData = this.state.data || {};
        const dealerServiceInformation = this.state.data.dealerServiceInformations || [];
        const dealerPersonnel = this.state.data.dealerPersonnels || [];
        const partPriceCoefficientDetail = this.state.data.partPriceCoefficientDetail || [];
        const specialPartPriceCoefficient = this.state.data.specialPartPriceCoefficient || [];
        const dealerPartsColumns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.brandCode',
                    defaultMessage: '品牌'
                }),
                dataIndex: 'brandCode',
                render: (text, record) => `(${record.brandCode}) ${record.brandName}`
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.tradeMethodCode',
                    defaultMessage: '贸易方式'
                }),
                dataIndex: 'tradeMethodCode',
                render: (text, record) => `(${record.tradeMethodCode}) ${record.tradeMethodName}`
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.currency',
                    defaultMessage: '币种'
                }),
                dataIndex: 'currency',
                render: text => conventEnumValueToString(currency, text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.cbuIntervalDate',
                    defaultMessage: 'CBU间隔月份'
                }),
                dataIndex: 'cbuIntervalDate',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.kdIntervalDate',
                    defaultMessage: 'KD间隔月份'
                }),
                dataIndex: 'kdIntervalDate',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.exAuthorizatedLimit',
                    defaultMessage: '备件超授权额度'
                }),
                dataIndex: 'exAuthorizatedLimit',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'detail.info.isNeedPicture',
                    defaultMessage: '是否需要索赔照片'
                }),
                dataIndex: 'isNeedPicture',
                render: text => renderBoolean(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.price',
                    defaultMessage: '工时单价'
                }),
                dataIndex: 'price',
                render: text => formatAmount(text),
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.mgmtFeeRate',
                    defaultMessage: '备件管理费率'
                }),
                dataIndex: 'mgmtFeeRate',
                render: text => formatPercent(text),
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.claimPITitle',
                    defaultMessage: '索赔PI标题'
                }),
                dataIndex: 'claimPITitle',
            }
        ];

        const dealerPersonnelColumns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.userName',
                    defaultMessage: '编号'
                }),
                dataIndex: 'userName',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.name',
                    defaultMessage: '姓名'
                }),
                dataIndex: 'name',
            },
        ];

        const partPriceCoefficientDetailColumns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.brand',
                    defaultMessage: '品牌'
                }),
                dataIndex: 'brandCode',
                render: (text, record) => `(${record.brandCode})${record.brandName}`
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.year',
                    defaultMessage: '年份'
                }),
                dataIndex: 'year',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.month',
                    defaultMessage: '月份'
                }),
                dataIndex: 'month',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.priceRate',
                    defaultMessage: '价格系数'
                }),
                dataIndex: 'priceRate',
                render: text => formatPercent(text)
            }
        ];

        const specialPartPriceCoefficientColumns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.brand',
                    defaultMessage: '品牌'
                }),
                dataIndex: 'brandCode',
                render: (text, record) => `(${record.brandCode})${record.brandName}`
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.partCode',
                    defaultMessage: '备件编号'
                }),
                dataIndex: 'partCode',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.partName',
                    defaultMessage: '备件名称'
                }),
                dataIndex: 'partName',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.priceRate',
                    defaultMessage: '价格系数'
                }),
                dataIndex: 'priceRate',
                render: text => formatPercent(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.startTime',
                    defaultMessage: '生效日期'
                }),
                dataIndex: 'startTime',
                render: text => formatDateTime(text, DATE_FORMAT)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.endTime',
                    defaultMessage: '失效日期'
                }),
                dataIndex: 'endTime',
                render: text => formatDateTime(text, DATE_FORMAT)
            },
        ];
        const {options} = detailData;
        const {formatMessage} = this.props.intl;
        const operations = [];
        if(hasPermissions(this.props.permissions, PERMISSION.update) && hasPermissions(options, PERMISSION.update))
            operations.push(<Button key="update" onClick={this.handleUpdateClick} size="small">{
                formatMessage({
                    id: 'detailPage.btn.update',
                    defaultMessage: '编辑'
                })
            }</Button>);
        return (
            <div className={styles.detail}>
                <Card loading={this.state.loading}>
                    <DescriptionList size="large" title={<Row><Col span={12}>{
                        formatMessage({
                            id: 'detailPage.card.tradeMethodmessage',
                            defaultMessage: '基本信息'
                        })
                    }</Col>
                    <Col className={`col-align-right ${styles.detail}`} span={12}>{operations}</Col>
                    </Row>}>
                        <Description term={formatMessage({
                            id: 'detailPage.data.code',
                            defaultMessage: '编号',
                        })}>{detailData.code}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.name',
                            defaultMessage: '名称'
                        })}>{detailData.name}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.shortCode',
                            defaultMessage: '简码',
                        })}>{detailData.shortCode}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.shortName',
                            defaultMessage: '简称'
                        })}>{detailData.shortName}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.kind',
                            defaultMessage: '客户分类',
                        })}>{conventEnumValueToString(agentKind, detailData.kind)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.area',
                            defaultMessage: '区域'
                        })}>{detailData.area}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.country',
                            defaultMessage: '国家'
                        })}>{detailData.country}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.province',
                            defaultMessage: '省份',
                        })}>{detailData.province}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.city',
                            defaultMessage: '城市'
                        })}>{detailData.city}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.contactNumber',
                            defaultMessage: '联系电话'
                        })}>{detailData.contactNumber}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.fax',
                            defaultMessage: '传真'
                        })}>{detailData.fax}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.address',
                            defaultMessage: '联系地址'
                        })}>{detailData.address}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.zipCode',
                            defaultMessage: '邮政编码'
                        })}>{detailData.zipCode}</Description>
                    </DescriptionList>
                </Card>
                <Card
                    title={this.props.intl.formatMessage({
                        id: 'detailPage.dealerServiceInformation.title',
                        defaultMessage: '服务经营权限清单'
                    })}
                    bordered={false}>
                    <Table
                        className="white-space-nowrap"
                        rowKey="id"
                        columns={dealerPartsColumns}
                        pagination={false}
                        dataSource={dealerServiceInformation} {...TABLE} />
                </Card>
                <Card
                    title={this.props.intl.formatMessage({
                        id: 'detailPage.DealerPersonnel.title',
                        defaultMessage: '人员清单'
                    })}
                    bordered={false}>
                    <Table
                        className="white-space-nowrap"
                        rowKey="id"
                        columns={dealerPersonnelColumns}
                        pagination={false}
                        dataSource={dealerPersonnel} {...TABLE} />
                </Card>
                <Card
                    title={this.props.intl.formatMessage({
                        id: 'detailPage.partPriceCoefficient.title',
                        defaultMessage: '备件价格系数清单'
                    })}
                    bordered={false}>
                    <Table
                        className="white-space-nowrap"
                        rowKey="id"
                        columns={partPriceCoefficientDetailColumns}
                        pagination={false}
                        dataSource={partPriceCoefficientDetail} {...TABLE} />
                </Card>
                <Card
                    title={this.props.intl.formatMessage({
                        id: 'detailPage.specialPartPriceCoefficient.title',
                        defaultMessage: '特殊件价格系数清单'
                    })}
                    bordered={false}>
                    <Table
                        className="white-space-nowrap"
                        rowKey="id"
                        columns={specialPartPriceCoefficientColumns}
                        pagination={false}
                        dataSource={specialPartPriceCoefficient} {...TABLE} />
                </Card>
                <div className="page-toolbar">
                    <Button
                        type="primary"
                        disabled={this.state.loading}
                        onClick={this.props.onCancel}>{formatMessage({
                            id: 'detailPage.btn.return',
                            defaultMessage: '返回'
                        })}</Button>
                </div>
            </div>
        );
    }
}

DetailPanel.propTypes = {
    id: PropTypes.string.isRequired,
    permissions: PropTypes.array.isRequired,
    onCancel: PropTypes.func.isRequired,
    history: PropTypes.object,
    intl: PropTypes.object,
    successReturn: PropTypes.func,
};

import {connect} from 'react-redux';
import {tableSearch} from './actions';
import {injectIntl} from './intl';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';

const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const mapStateToProps = (state, props) => ({
    id: props.id,
    permissions: getPermissions(state),
});
const mapDispatchToProps = (dispatch, props) => ({
    onCancel: () => {
        props.history.push(routes.query.url());
    },
    successReturn: () => {
        dispatch(tableSearch());
        props.history.push(routes.query.url());
    },
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DetailPanel));
